<template>
	<view class="app">
		<pageHeader ref="pageHeader"></pageHeader>
		<!-- 轮播图 -->
		<mix-swiper :albumPics="data.images" ></mix-swiper>
		<!-- <mix-swiper :list="galleries" ></mix-swiper> -->
		<view class="introduce b-b ">
			<!-- :style="{background: 'url('+game_title_bg+')'}" -->
			<view class="game-title"  >
				<image class="game-title-bg" src="/static/ui1.0/game_title_bg.png" mode="widthFix"></image>
				<text class="title">{{ data.name }}</text>
			</view>
			
			<view class="c-list">
				<view class="row b-l">
					<text class="tit">钓场收费</text>
					<view class="con-list fill column">
						<text> {{ data.serviceFee }}元 </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">开赛时间</text>
					<view class="con-list fill column">
						<text> {{ data.startTime }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">结赛时间</text>
					<view class="con-list fill column">
						<text> {{ data.endTime||'' }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">比赛类型</text>
					<view class="con-list fill column">
						<text> {{ data.scoreType==1?"重量赛":"尾数赛" }} </text>
					</view>
				</view>
				<view class="row b-l" @click="showMap()">
					<text class="tit">比赛地点</text>
					<view class="con-list fill column">
						<text> {{ data.fishpondAddress||'' }} </text>
					</view>
					<image class="location" src="/static/ui1.0/location.jpg"></image>
				</view>
				<view class="row b-l">
					<text class="tit">钓场名称</text>
					<view class="con-list fill column">
						<text> {{ data.fishpondName }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">人数上限</text>
					<view class="con-list fill column">
						<text> {{ data.limitUp }} </text>
					</view>
				</view>
				<view class="row b-l" @click="makeCall(data.phone)">
					<text class="tit">联系电话</text>
					<view class="con-list fill column">
						<text> {{ data.phone }} </text>
					</view>
				</view>
			</view>
		</view>
		<!--  分享 -->
		<!-- <view class="share-wrap row"> -->
			<!-- <view class="icon row">
				<text class="mix-icon icon-iconfontxingxing"></text>
				<text>分享</text>
			</view>
			<text class="tit">发给好友看看吧~</text>
			<text class="mix-icon icon-bangzhu1"></text> -->
			
			<!-- #ifdef MP-WEIXIN -->
			<!-- <button type="primary" open-type="share">
				<view class="btn">
					立即分享
					<text class="mix-icon icon-you"></text>
				</view>
			</button> -->
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<!-- <view class="btn" @click="doAppShare">
				立即分享
				<text class="mix-icon icon-you"></text>
			</view> -->
			<!-- #endif -->
		<!-- </view> -->
		<view id="award" >
			<view class="c-saizhi-title">
				<image class="c-saizhi-title-bg" src="/static/ui1.0/saizhi_bg.png" mode="widthFix"></image>
				<text class="title">赛制说明</text>
			</view>
			<view class="c-saizhi">
				<view class="row b-l">
					<view class="con-list fill column">
						<text> {{ data.description }} </text>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-desc" v-if="data.detailHtml">
			<view class="d-header center">
				<text>赛场介绍</text>
			</view>
			<jyf-parser
				ref="article"
				:html="data.detailHtml" 
				lazy-load 
				show-with-animation 
			></jyf-parser>
		</view>
		<view class="player-list" :class="{show: loaded}" >
			
			<view class="c-ranking-title">
				<image class="c-ranking-title-bg" src="/static/ui1.0/saizhi_bg.png" mode="widthFix"></image>
				<text class="title">报名列表</text>
			</view>
			<player-list ref="playerList" :list="playerList" :game="data" :type="dataType" id="players" ></player-list>
		</view>
		<!-- 底部操作菜单 -->
		<bottom-operation :infoData="data" :type="hasJoin" @onOprationClick="onOprationClick" ></bottom-operation>
		<!-- 规格面板 -->
		<sku v-if="data.id" ref="skuPopup" :infoData="data" @join="join" @unjoin="unjoin"></sku>
		<!-- loading -->
		<mix-loading v-if="isLoading" :mask="true"></mix-loading>
		<view class="share-bar" v-if="showShared">
			<view class="bars">
				<button class="item" open-type="share">
					<image class="icon" src="/static/ui1.0/shareother.png"></image>
					<text class="txt">分享给朋友</text>
				</button>
				<button class="item" @click="shareBussiness">
					<image class="icon" src="/static/ui1.0/goodcircle.png"></image>
					<text class="txt">推荐好物圈</text>
				</button>
				<button class="item" @click="downloudpic">
					<image class="icon" src="/static/ui1.0/loadimg.png"></image>
					<text class="txt">保存图片</text>
				</button>
			</view>
			<view class="bottom" @tap="showSharedFun">
				<text>取消</text>
			</view>
		</view>
		<view :class="'canvaswrap ' + (showcanvas?'showcanvas':'hidecavas')">
			<canvas canvas-id="mycanvas" style="position:fixed; top:130rpx; left:110rpx; width:530rpx; height:816rpx; border-radius:16rpx;"></canvas>
			<!-- <cover-image class="canceldownload" style="position:fixed; top:160rpx; right:140rpx; width:40rpx; height:40rpx;"
			 @tap.stop="canceldownload" src="/static/static/images/icon_close.png"></cover-image> -->
			<view class="savepic" @tap.stop="saveImageToAlbum">保存图片</view>
		</view>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	var api = require("../../config/api.js");
	const device = uni.getSystemInfoSync();
	const xs = device.windowWidth / 750;
	import jyfParser from '@/components/jyf-parser/jyf-parser.vue'
	import pageHeader from './components/detail-page-header'//页面头
	import mixSwiper from './components/mix-swiper'//轮播图
	// import ratingItem from '@/pagesB/rating/components/rating-item'//评价
	import bottomOperation from './components/bottom-operation'//底部栏
	import sku from './components/sku'//sku面板
	import {mapState} from 'vuex'
	// import playerList from '@/pagesA/my/joinGame/components/player-list.vue'
	import playerList from './components/player-list.vue'
	
	let _anchorList = [];
	export default{
		components: {
			jyfParser,
			pageHeader,
			mixSwiper,
			// ratingItem,
			bottomOperation,
			sku,
			playerList,
		},
		data() {
			return {
				data: {
					game: {},
					images:[]
				},
				hasJoin: 0,
				showShared: false,
				showcanvas: false,
				sharePath: '',
				galleries: [],
				postUrl: '',
				dataType:'0',
				playerList: [],
				sharedUrl: 'https://langyayanxuan.com/zm/upload/minio/view/zhima/shared-min.jpeg',
			};
		},
		onLoad(options){
			console.log("==scene=="+JSON.stringify(options))
			var scene = decodeURIComponent(options.scene);
			console.log("==scene=="+scene)
			if (scene !== 'undefined' && scene !== undefined) {
				var data = scene.split(',');
				this.id = data[0];
				this.invitationCode = data[1] || '';
			} else {
				this.id = options.id;
				this.invitationCode = options.invitationCode || '';
			}
			this.dataType = options.dataType
			if(this.invitationCode){
				console.log("==this.invitationCode=="+this.invitationCode)
				uni.setStorageSync('invitationCode', this.invitationCode);
			}
			// this.sharePath = '/pages/game/detail?id='+this.data.id+'&invitationCode='+this.userInfo.invitationCode;
		},
		computed: {
			...mapState(['userInfo','player']),
		},
		onShow() {
			console.log("userInfo=="+JSON.stringify(this.userInfo))
			// this.$store.dispatch('getPlayer')
			// this.player = wx.getStorageSync("player");
			this.loadData();
		},
		onPageScroll(e) {
			this.$refs.pageHeader && this.$refs.pageHeader.pageScroll(e);
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			return {
				title: this.data.title,
				path: this.sharePath,
				imageUrl: this.data.image
			}
		},
		// #endif
		methods:{
			async loadData(){
				// const res = await this.$request_mock('GameDetail', 'GameDetail', {
				// 	id: this.id
				// })
				const res = await this.$request('GameDetail', 'GameDetail', {
					id: this.id
				})
				const data = res.result;
				// console.log(">>>>data"+JSON.stringify(data))
				// if(data.images){
				// 	let data = data.images.split(",");
				// 	this.galleries = data.map(src=>{
				// 		return {
				// 			loaded: !!this.loaded,
				// 			src
				// 		}
				// 	});
				// }
				
				if(data.gamePlayer){
					if(data.payOrder && data.payOrder.status == 1){
						this.hasJoin = 2;
					}else{
						this.hasJoin = 1;
					}
				}else{
					this.hasJoin = 0;
				}
				this.data = data;
				this.playerList = this.playerList.concat(data.players);
				// console.log("==load data=="+JSON.stringify(this.data))
				this.$nextTick(()=>{
					this.calcAnchor();//计算锚点参数
				})
			},
			//报名
			async join(player){
				// console.log("==join=="+JSON.stringify(gamePlayer))
				const res = await this.$post('GameDetail', 'GameJoin', {id: this.id, player: player});
				// console.log("==res data=="+JSON.stringify(res))
				if(res.code === 200){
					// #ifdef MP-WEIXIN
						uni.requestPayment({
						  'timeStamp': res.result.timeStamp,
						  'nonceStr': res.result.nonceStr,
						  'package': res.result.packageName,
						  'signType': res.result.signType,
						  'paySign': res.result.paySign,
						  'success': function (res) {
						    uni.redirectTo({
						      url: '/pagesA/my/joinGame/list'
						    });
						  },
						  'fail': function (res) {
						    this.$util.msg(res.message);
						  }
						});
					// #endif
					// #ifndef MP-WEIXIN
					this.$util.msg(res.message);
					this.hidePopup('skuPopup');
					setTimeout(()=>{
						// uni.navigateBack();
						uni.navigateTo({
							url: '/pagesA/my/joinGame/list'
						})
					}, 1000)
					// #endif
				}
			},
			//取消报名
			async unjoin(){
				// console.log("==unjoin==")
				const res = await this.$post('GameDetail', 'GameUnJoin', {id: this.id});
				// console.log("==res data=="+JSON.stringify(res))
				this.$util.msg(res.msg);
				this.$util.msg("操作成功");
				this.hidePopup('skuPopup');
				setTimeout(()=>{
					// uni.navigateBack();
					uni.switchTab({
						url: '/pages/tabbar/home'
					})
				}, 1000)
			},
			//地图导航
			showMap(){
				// console.log("==showMap=="+this.data.longitude)
				uni.openLocation({
					longitude: Number(this.data.longitude),
					latitude: Number(this.data.latitude)
				});

			},
			showSharedFun(){
				// console.log("==showSharedFun==")
				this.showShared = !this.showShared;
			},
			//计算锚点参数
			async calcAnchor(){
				const size = await new Promise(res => {
					uni.createSelectorQuery().select('#award').boundingClientRect(data => {
						res(data);
					}).exec();
				});
				const headerHeight = this.systemInfo.statusBarHeight + this.systemInfo.navigationBarHeight;
				const a1 = (size ? size.top : 0) - headerHeight;
				const a2 = (size ? size.bottom : 0) + uni.upx2px(12) - headerHeight;
				this.$refs.pageHeader.anchorList[1].top = a1;
				this.$refs.pageHeader.anchorList[2].top = a2;
				_anchorList = [0, a1, a2];
			},
			
			showPopup(key, type){
				this.$refs[key].open(type);
			},
			onOprationClick(type){
				// console.log("==onOprationClick=="+type)
				if(type == 'join'){
					console.log("==onOprationClick=this.player="+JSON.stringify(this.player))
					var player = this.player;
					if(!player.id){
						player = wx.getStorageSync("player");
					}
					console.log("==onOprationClick=player="+JSON.stringify(player))
					if(!player.id){
						util.gologin();
						return;
					}
					// this.player = player;
					this.showPopup('skuPopup', type);
				}else if(type == 'unjoin'){
					this.unjoin();
				}else if(type == 'showSharedFun'){
					this.showSharedFun();
				}else if(type == 'makeCall'){
					this.makeCall(this.data.phone);
				}else if(type == 'downloudpic'){
					// this.downloudpic();
					this.downloudpic2();
				}
				// if(type == 'unJoin'){
				// }else{
				// 	this.showPopup('skuPopup', type);
				// }
				
			},
			makeCall(phoneNumber){
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			shareBussiness: function() {
				if (uni.navigateToMiniProgram) {
					uni.navigateToMiniProgram({
						appId: 'wxf3744a12e1d5db8b',
						path: '/publish/ugc-publish/ugc-publish',
						extraData: {
							productInfo: {
								title: this.data.title,
								path: this.sharePath,
								thumbUrl: this.data.image
							}
						}
					});
				}
			},
			doAppShare(){
				this.$util.throttle(async ()=>{
					const data = {
					    provider: "weixin",
					    scene: 'WXSceneSession',
					    type: 5,
						imageUrl: this.data.thumb,
						title: this.data.title,
						miniProgram: {
							id: 'gh_3dada2e0f833',
							path: this.sharePath,
							type: 0,
							webUrl: ''
						},
					    success: res=> {
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: err=> {
					        console.log("fail:" + JSON.stringify(err));
					    }
					}
					uni.share(data);
				})
			},
			
			//https://langyayanxuan.com/zm/upload/minio/view/zhima/shared.jpeg
			/*分享-保存图片*/
			async downloudpic2() {
				
				let that = this;
				that.showcanvas = true;
				that.showShared = false;
			
				var player = wx.getStorageSync('player')
				// var player = this.player;
				console.log("==player=="+JSON.stringify(player));
				console.log("==player=="+(!player.avatar));
					wx.showLoading({
						title: '图片正在生成中...'
					}) //  
					//获取商品图片
					let promise1 = new Promise(function(resolve, reject) {
						let goodurl = that.sharedUrl;
						// console.log("==goodurl=="+goodurl)
						wx.downloadFile({
							url: goodurl,
							success: function(res) {
								console.log('promise1 downloadFile'+JSON.stringify(res));  
								wx.getImageInfo({
									src: res.tempFilePath,
									success: function(res) {
										console.log('promise1 getImageInfo'+JSON.stringify(res));  
										resolve(res)
									}
								})
							},
							fail: function() {
								console.log('fail 赛事图片')
								resolve()
							}
						})
			
					});
					var sceneStr = that.data.id;
					if(that.userInfo.invitationCode){
						// sceneStr += ","+that.userInfo.invitationCode;
						sceneStr += ","+that.userInfo.id;
					}
					console.log("==that.userInfo.invitationCode=="+that.userInfo.id)
					console.log("==sceneStr=="+sceneStr)
					//获取二维码
					let promise3 = new Promise(function(resolve, reject) {
						util.request(api.WxWxcode, {
							scene: sceneStr,
							page: 'pages/game/detail',
						}, 'POST').then(function(res) {
							// console.log("==WxWxcode=="+JSON.stringify(res))
							const fsm = wx.getFileSystemManager();
							const FILE_BASE_NAME = 'tmp_base64src';
							const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(res.message) || [];
							// console.log("==format=="+format)
							if (!format) {
								return;
							}
							const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
							// console.log("==filePath=="+`${wx.env.USER_DATA_PATH}`);
							// console.log("==filePath=="+filePath);
							const buffer = wx.base64ToArrayBuffer(bodyData);
							// console.log("==buffer=="+buffer)
							fsm.writeFile({
								filePath: filePath,
								data: bodyData,
								encoding: 'base64',
								success(res) {
									console.log("==fsm.writeFile=="+JSON.stringify(res))	
									wx.getImageInfo({
										src: filePath,
										success: function(res) {
											resolve(res)
											console.log('promise3'+JSON.stringify(res));
										}
									})
								},
								fail:function(err){
									console.log('promise3 err'+JSON.stringify(err));
								}
							})
						});
					});
					Promise.all([
						promise1, promise3
						// promise3
					]).then(res => {
			
						// console.log("==Promise="+JSON.stringify(res))
						var ctx = wx.createCanvasContext('mycanvas');
						var cancel = wx.createCanvasContext('cancel');
						//绘制背景框
						console.log(xs);
						that.roundRect(ctx, 0, 0, 530 * xs, 816 * xs, 16 * xs, '#f1f1f1');
						//画头像
						// if(player.avatar){
						// 	ctx.save()
						// 	ctx.beginPath()
						// 	ctx.arc(60 * xs, 60 * xs, 30 * xs, 0, 2 * Math.PI);
						// 	ctx.clip();
						// 	ctx.drawImage(res[1].path, 30 * xs, 30 * xs, 60 * xs, 60 * xs);
						// 	ctx.restore()
						// 	//绘制内部背景框
						// 	that.roundRect(ctx, 30 * xs, 106 * xs, 470 * xs, 680 * xs, 16 * xs, '#fff');
						// }
						
						//画商品图
						ctx.save();
						that.roundRect(ctx, 30 * xs, 40 * xs, 470 * xs, 900 * xs, 16 * xs);
						ctx.drawImage(res[0].path, 30 * xs, 40 * xs, 470 * xs, 740 * xs);
						// ctx.drawImage('/static/ui1.0/shared-min.jpeg', 30 * xs, 40 * xs, 470 * xs, 700 * xs);
						ctx.restore()
			
						//画二维码
						ctx.save()
						ctx.beginPath()
						// ctx.arc(100 * xs, 706 * xs, 50 * xs, 0, 2 * Math.PI);
						ctx.arc(110 * xs, 706 * xs, 500 * xs, 0, 2 * Math.PI);
						ctx.clip();
						// ctx.drawImage(res[1].path, 50 * xs, 666 * xs, 100 * xs, 100 * xs);
						ctx.drawImage(res[1].path, 71 * xs, 698 * xs, 72 * xs, 72 * xs);
						// ctx.drawImage('/static/ui1.0/goodcircle.png', 55 * xs, 646 * xs, 95 * xs, 95 * xs);
						ctx.restore()
						
			
			// 			that.textwrap(ctx, '', 30 * xs, '#353535', 50 * xs, 616 * xs, 530 * xs, 30 * xs, '', 2,
			// 				'left');
			
			// 			that.drawText(ctx, '长按二维码识别小程序', 26 * xs, '#353535', 184 * xs, 700 * xs, '', 'left');
						that.drawText(ctx, that.data.phone||'', 16 * xs, '#cccccc', 200 * xs, 732 * xs, '', 'left');
						that.drawText(ctx, that.data.fishpondAddress||'', 16 * xs, '#cccccc', 200 * xs, 749 * xs, '', 'left');
			
			// 			that.drawText(ctx, '分享自掐鱼', 22 * xs, '#888888', 184 * xs, 738 * xs, '', 'left');
						// console.log("draw")
						ctx.draw(false, function() {
							wx.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: 530,
								height: 816,
								destWidth: 2150,
								destHeight: 3200,
								fileType: 'jpg',
								quality: 1,
								canvasId: 'mycanvas',
								success: function(res) {
									// console.log("相册临时路径"+JSON.stringify(res))
									that.postUrl = res.tempFilePath
									wx.hideLoading();
								},
								fail: function(res) {
									console.log(res)
								}
							})
						});
					})
			},
			/*分享-保存图片*/
			async downloudpic() {
				let that = this;
				that.showcanvas = true;
				that.showShared = false;
			
				var player = wx.getStorageSync('player')
				// var player = this.player;
				console.log("==player=="+JSON.stringify(player));
				console.log("==player=="+(!player.avatar));
				// if (!player.avatar) {
				// 	util.gologin();
				// 	that.canceldownload()
				// 	return;
				// } else {
					wx.showLoading({
						title: '图片正在生成中...'
					}) //  
					//获取商品图片
					let promise1 = new Promise(function(resolve, reject) {
						let goodurl = that.data.image;
						// console.log("==goodurl=="+goodurl)
						wx.downloadFile({
							url: goodurl,
							success: function(res) {
								console.log('promise1 downloadFile'+JSON.stringify(res));  
								wx.getImageInfo({
									src: res.tempFilePath,
									success: function(res) {
										console.log('promise1 getImageInfo'+JSON.stringify(res));  
										resolve(res)
									}
								})
							},
							fail: function() {
								console.log('fail 赛事图片')
								resolve()
							}
						})
			
					});
					//获取用户头像
					let promise2 = new Promise(function(resolve, reject) {
						//获得微信昵称，下载微信头像
						let avatarurl = player.avatar;
						 // console.log("avatarurl"+avatarurl);
						wx.downloadFile({
							url: avatarurl,
							success: function(res) {
								wx.getImageInfo({
									src: res.tempFilePath,
									success: function(res) {
										resolve(res)
										console.log('promise2'+JSON.stringify(res));
									}
								})
							},
							fail: function() {
								console.log('fail 用户头像')
								resolve()
							}
						});
					});
			
					// var scene = {
					// 	id: that.data.id,
					// 	invitationCode: that.invitationCode
					// }
					// var sceneStr = encodeURIComponent(JSON.stringify(scene));
					var sceneStr = that.data.id;
					if(that.invitationCode){
						sceneStr += ","+that.invitationCode;
					}
					console.log("==sceneStr=="+sceneStr)
					//获取二维码
					let promise3 = new Promise(function(resolve, reject) {
						util.request(api.WxWxcode, {
							scene: sceneStr,
							page: 'pages/game/detail',
						}, 'POST').then(function(res) {
							// console.log("==WxWxcode=="+JSON.stringify(res))
							const fsm = wx.getFileSystemManager();
							const FILE_BASE_NAME = 'tmp_base64src';
							const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(res.message) || [];
							// console.log("==format=="+format)
							if (!format) {
								return;
							}
							const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
							// console.log("==filePath=="+`${wx.env.USER_DATA_PATH}`);
							// console.log("==filePath=="+filePath);
							const buffer = wx.base64ToArrayBuffer(bodyData);
							// console.log("==buffer=="+buffer)
							fsm.writeFile({
								filePath: filePath,
								data: bodyData,
								encoding: 'base64',
								success(res) {
									console.log("==fsm.writeFile=="+JSON.stringify(res))	
									wx.getImageInfo({
										src: filePath,
										success: function(res) {
											resolve(res)
											console.log('promise3'+JSON.stringify(res));
										}
									})
								},
								fail:function(err){
									console.log('promise3 err'+JSON.stringify(err));
								}
							})
						});
					});
			
			
					let promise4 = new Promise(function(resolve, reject) {
			
						resolve();
					});
			
					Promise.all([
						promise1, promise2, promise3, promise4
					]).then(res => {
			
						console.log("==Promise="+JSON.stringify(res))
						var ctx = wx.createCanvasContext('mycanvas');
						var cancel = wx.createCanvasContext('cancel');
						//绘制背景框
						console.log(xs);
						that.roundRect(ctx, 0, 0, 530 * xs, 816 * xs, 16 * xs, '#f1f1f1');
						//画头像
						if(player.avatar){
							ctx.save()
							ctx.beginPath()
							ctx.arc(60 * xs, 60 * xs, 30 * xs, 0, 2 * Math.PI);
							ctx.clip();
							ctx.drawImage(res[1].path, 30 * xs, 30 * xs, 60 * xs, 60 * xs);
							ctx.restore()
							//绘制内部背景框
							that.roundRect(ctx, 30 * xs, 106 * xs, 470 * xs, 680 * xs, 16 * xs, '#fff');
						}
						
			
						//画二维码
						ctx.save()
						ctx.beginPath()
						ctx.arc(100 * xs, 716 * xs, 50 * xs, 0, 2 * Math.PI);
						// ctx.arc(110 * xs, 706 * xs, 500 * xs, 0, 2 * Math.PI);
						ctx.clip();
						ctx.drawImage(res[2].path, 50 * xs, 666 * xs, 100 * xs, 100 * xs);
						ctx.restore()
			
						
						if(player.name){
							//画商品图
							if(res[0].path){
								ctx.save();
								that.roundRect(ctx, 30 * xs, 106 * xs, 470 * xs, 680 * xs, 16 * xs);
								ctx.drawImage(res[0].path, 30 * xs, 106 * xs, 470 * xs, 540 * xs);
								// ctx.drawImage(res[2].path, 30 * xs, 106 * xs, 470 * xs, 470 * xs);
								ctx.restore()
							}
							//画微信昵称
							that.drawText(ctx, player.name, 24 * xs, '#353535', 110 * xs, 60 * xs, 'true', 'left');
						}else{
							//画商品图
							ctx.save();
							that.roundRect(ctx, 30 * xs, 40 * xs, 470 * xs, 730 * xs, 16 * xs);
							ctx.drawImage(res[0].path, 30 * xs, 40 * xs, 470 * xs, 590 * xs);
							// ctx.drawImage(res[2].path, 30 * xs, 106 * xs, 470 * xs, 470 * xs);
							ctx.restore()
						}
			
						// that.drawText(ctx, '为你挑选了一个好物', 18 * xs, '#888888', 110 * xs, 86 * xs, '', 'left');
			
						that.textwrap(ctx, '', 30 * xs, '#353535', 50 * xs, 616 * xs, 530 * xs, 30 * xs, '', 2,
							'left');
			
						that.drawText(ctx, '长按二维码识别小程序', 26 * xs, '#353535', 184 * xs, 700 * xs, '', 'left');
			
						that.drawText(ctx, '分享自掐鱼', 22 * xs, '#888888', 184 * xs, 738 * xs, '', 'left');
						// console.log("draw")
						ctx.draw(false, function() {
							wx.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: 530,
								height: 816,
								destWidth: 2150,
								destHeight: 3200,
								fileType: 'jpg',
								quality: 1,
								canvasId: 'mycanvas',
								success: function(res) {
									// console.log("相册临时路径"+JSON.stringify(res))
									that.postUrl = res.tempFilePath
									wx.hideLoading();
								},
								fail: function(res) {
									console.log(res)
								}
							})
						});
					})
				// }
			},
			
			//画圆角矩形
			roundRect(ctx, x, y, w, h, r, c = null) {
				if (w < 2 * r) {
					r = w / 2;
				}
			
				if (h < 2 * r) {
					r = h / 2;
				}
			
				ctx.beginPath();
			
				if (c != null) {
					ctx.fillStyle = c;
				}
			
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
				ctx.moveTo(x + r, y);
				ctx.lineTo(x + w - r, y);
				ctx.lineTo(x + w, y + r);
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
				ctx.lineTo(x + w, y + h - r);
				ctx.lineTo(x + w - r, y + h);
				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
				ctx.lineTo(x + r, y + h);
				ctx.lineTo(x, y + h - r);
				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
				ctx.lineTo(x, y + r);
				ctx.lineTo(x + r, y);
			
				if (c != null) {
					ctx.fill();
				} else {
					ctx.clip();
				}
			
				ctx.closePath();
			},
			
			//画文字
			drawText(ctx, text, font, c, x, y, bold, align) {
				ctx.setFillStyle(c);
				ctx.setFontSize(font);
				ctx.setStrokeStyle(c);
				ctx.setTextAlign(align);
			
				if (bold) {
					ctx.fillText(text, x, y - 0.5);
					ctx.fillText(text, x - 0.5, y);
				}
			
				ctx.fillText(text, x, y);
			},
			
			//文本换行
			textwrap(ctx, text, font, c, x, y, w, h, bold, line, align) {
				console.log("text "+text)
				let td = Math.ceil(w / font);
				let tr = Math.ceil(text.length / td);
			
				for (let i = 0; i < tr; i++) {
					var txt = {
						ctx: ctx,
						x: x,
						y: y + i * h,
						c: c,
						font: font,
						align: align,
						text: text.substring(i * td, (i + 1) * td),
						bold: bold
					};
			
					if (i < line) {
						if (i == line - 1) {
							txt.text = txt.text.substring(0, txt.text.length - 3) + '......';
						}
			
						this.drawText(txt.ctx, txt.text, txt.font, txt.c, txt.x, txt.y, txt.bold, txt.align);
					}
				}
			},
			
			saveImageToAlbum: function() {
				var that = this; //获取用户授权 
				//#ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						//#endif
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
			
								success(res) {
									uni.saveImageToPhotosAlbum({
										filePath: that.postUrl,
			
										success(res) {
											uni.hideLoading();
											uni.showModal({
												title: '提示',
												content: '图片已保存，快去分享吧',
												showCancel: false
											});
											console.log(JSON.stringify(res));
										}
			
									});
								},
			
								fail() {
									//重新获取授权
									uni.showModal({
										title: '提示',
										content: '需要您授权才能保存相册哦',
										cancelText: '取消',
										cancelColor: '#999',
										confirmText: '确定',
										confirmColor: '#f94218',
			
										success(res) {
											if (res.confirm) {
												uni.authorize({
													scope: 'scope.writePhotosAlbum',
													success(res) {
														uni.hideLoading();
														uni.showModal({
															title: '提示',
															content: '图片已保存，快去分享吧',
															showCancel: false
														});
														// console.log(JSON.stringify(res));
													}
												})
											} else if (res.cancel) {
												uni.showModal({
													title: '提示',
													content: '不授权无法保存到相册',
													cancelshow: false
												})
											}
										}
									});
								}
							});
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: that.postUrl,
			
								success(res) {
									uni.hideLoading();
									uni.showModal({
										title: '提示',
										content: '图片已保存，快去分享吧',
										showCancel: false
									});
									console.log(JSON.stringify(res));
								}
			
							});
						}
						//#ifdef MP-WEIXIN
					}
				});
				//#endif
			},
			
			canceldownload() {
				this.showcanvas = false;
				wx.hideLoading();
			},
			
			
		},
	}
</script>

<style>
	page{
		background-color: #103167;
	}
</style>
<style scoped lang='scss'>
	.app{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
		
		&:after{
			content: '';
			display: block;
			width: 100%;
			height: 100rpx;
		}
	}
	/* 标题简介 */
	.introduce{
		background: #fff;
		margin: 10% 5% 15% 5%;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		
		.game-title {
			/* position: fixed; */
			position: relative;
			width: auto;
			height: auto;
			top: -80rpx;
			/* background-color: #66ffcc; */
			text-align:center;
			.game-title-bg{
				z-index: 1;
				position: relative;
				/* background-color: #fc0280; */
				width: auto;
				margin-left: 10%;
				margin-right: 10%;
			}
			.title{
				position: relative;
				font-size: 38rpx;
				color: #FFFFFF;
				/* background-color: #39B54A; */
				z-index: 100;
				top: -125rpx;
			}
		}
		.title{
			min-height: 44rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 44rpx;
			font-weight: 700;
		}
		.price-wrap{
			min-height: 40rpx;
			margin-top: 28rpx;
			font-size: 26rpx;
		}
		.m-price{
			margin-left: 10rpx;
			margin-right: 16rpx;
			color: #999;
			text-decoration: line-through;
		}
		.tag{
			transform: translateY(4rpx);
			padding: 0 10rpx;
			margin-left: 8rpx;
			background: $base-color;
			font-size: 20rpx;
			color: #fff;
			line-height: 32rpx;
			border-radius: 4rpx;
			position: relative;
			bottom: 8rpx;
		}
		.bot{
			padding: 28rpx 0 10rpx 4rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	/* 分享 */
	.share-wrap{
		background: linear-gradient(to right, #fdf5f6, #fbebf6);
		height: 76rpx;
		padding: 0 30rpx;
		color: $base-color;
		
		.icon{
			width: 90rpx;
			height: 30rpx;
			border: 1px solid $base-color;
			border-radius: 4rpx;
			position: relative;
			overflow: hidden;
			font-size: 22rpx;
			
			&:after{
				position:absolute;
				left: -20rpx;
				top: -12rpx;
				content: '';
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: $base-color;
			}
		}
		.icon-iconfontxingxing{
			position:relative;
			z-index: 1;
			font-size: 24rpx;
			margin-left: 2rpx;
			margin-right: 10rpx;
			color: #fff;
		}
		.tit{
			flex: 1;
			font-size: 26rpx;
			color: #666;
			margin-left:14rpx;
		}
		.icon-bangzhu1{
			padding: 10rpx;
			font-size: 30rpx;
			display: none;
		}
		.btn{
			padding-left: 20rpx;
			font-size: 24rpx;
			color: $base-color;
		}
		.icon-you{
			font-size: 22rpx;
			margin-left: 4rpx;
			color: $base-color;
		}
	}
	.c-saizhi-title{
		position: relative;
		width: auto;
		height: auto;
		top: -65rpx;
		/* background-color: #66ffcc; */
		text-align:center;
		z-index: 1;
		.title{
			font-size: 38rpx;
			color: #ffffff;
			font-weight: 700;
			position: relative;
			/* background-color: #39B54A; */
			z-index: 1;
			top: -125rpx;
		}
		.c-saizhi-title-bg{
			z-index: 1;
			position: relative;
			/* background-color: #fc0280; */
			width: auto;
			margin-left: 18%;
			margin-right: 18%;
		}
	}
	.c-saizhi{
		font-size: 26rpx;
		color: #888;
		background: #fff;
		/* background: #66ffff; */
		/* margin-top: -130rpx; */
		margin: 0% 5% 0% 5%;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-top: -180rpx;
		z-index: 2;
		position: relative;
		.row{
			min-height: 82rpx;
			padding: 16rpx 30rpx;
			position:relative;
			
			&:after{
				/* border-color: #eaeaea; */
				border-color: #20ffff;
			}
			&:last-child:after{
				border: 1;
			}
		}
		.location{
			width: 62rpx;
			height: 72rpx;
		}
		.con-list{
			color: #333;
			text{
				line-height: 40rpx;
			}
		}
		
	}
	.c-ranking-title{
		position: relative;
		width: auto;
		height: auto;
		top: -65rpx;
		text-align:center;
		z-index: 1;
		.title{
			font-size: 38rpx;
			color: #ffffff;
			font-weight: 700;
			position: relative;
			z-index: 1;
			top: -130rpx;
		}
		.c-ranking-title-bg{
			z-index: 1;
			position: relative;
			width: auto;
			margin-left: 13%;
			margin-right: 13%;
		}
	}
	.c-list{
		font-size: 26rpx;
		color: #888;
		background: #fff;
		/* background: #66ffff; */
		margin-top: -130rpx;
		.row{
			min-height: 82rpx;
			padding: 16rpx 30rpx;
			position:relative;
			
			&:after{
				/* border-color: #eaeaea; */
				border-color: #20ffff;
			}
			&:last-child:after{
				border: 1;
			}
		}
		.location{
			width: 62rpx;
			height: 72rpx;
		}
		.tit{
			width: 140rpx;
		}
		.con{
			flex: 1;
			color: #333;
			
			.attr{
				margin-right: 10rpx;
			}
			.service{
				margin-right: 30rpx;
				
				&:last-child{
					margin: 0;
				}
			}
		}
		.con-list{
			color: #333;
			
			text{
				line-height: 40rpx;
			}
		}
		.red{
			color: $base-color;
		}
		.icon-you{
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.share-bar {
		width: 100%;
		height: auto;
		position: fixed;
		background-color: #f1f1f1;
		z-index: 11;
		bottom: 0;
		/* display: none; */
		display: flex;
		flex-direction: column;
		border-radius: 15rpx 15rpx 0 0;
	}
	
	.share-bar .bars {
		width: 100%;
		height: auto;
		display: flex;
		padding: 30rpx 20rpx 0 0;
		background-color: #fff;
	}
	
	.share-bar .bars .item {
		width: auto;
		height: auto;
		display: flex;
		flex-direction: column;
		flex: 1;
		align-items: center;
		padding: 0;
		background-color: #fff;
		border: none;
	}
	
	.share-bar .bars .item .icon {
		width: 80rpx;
		height: 80rpx;
	}
	
	.share-bar .bars .item .txt {
		width: 130rpx;
		height: auto;
		font-size: 26rpx;
		line-height: 54rpx;
		color: #353535;
	}
	
	.share-bar .bottom {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	.share-bar .bottom .txt {
		font-size: 30rpx;
		color: #333333;
	}
	
	/* 分享 */
	.canvaswrap {
		height: 100%;
		width: 100%;
		position: fixed;
		background: rgba(0, 0, 0, .5);
		z-index: 11;
		top: 0;
		left: 0;
	}
	
	.showcanvas {
		display: block;
	}
	
	.hidecavas {
		display: none;
	}
	
	.canvaswrap .savepic {
		position: fixed;
		top: 1006rpx;
		left: 225rpx;
		height: 80rpx;
		width: 300rpx;
		line-height: 80rpx;
		border: solid 2rpx #e5e4e5;
		border-radius: 40rpx;
		color: #e5e4e5;
		font-size: 30rpx;
		text-align: center;
	}
	
	/*参赛选手列表*/
	.player-list{
		padding-top: 20rpx;
		background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
		opacity: 0;
		transition: opacity .2s;
		margin: 10% 5% 15% 5%;
		border-radius: 20rpx;
		&.show{
			opacity: 1;
		}
		.floor-header{
			padding-bottom: 30rpx;
		}
		/deep/ .list-item{
			box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
		}
	}
</style>
